var _lis = document.getElementsByTagName("li");
var box = document.getElementById("box");
var _ul = document.getElementsByTagName("ul")[0];
var _ullis = _ul.getElementsByTagName("li");



for (var i = 0; i < _lis.length; i++) {
    _lis[i].style.backgroundImage = 'url(img/'+i+'.jpg)';
    _lis[i].style.backgroundRepeat =  'no-repeat';
    _lis[i].style.backgroundSize = 'cover';
}


var timer = setInterval( function (){
    b();
}, 3000);
var timerb = setInterval( function (){
    a();
}, 6000);


function a () {
    for (var i = 0;i<_ullis.length;i++) {
        _ullis[i].style.opacity = 0.1;
    }  
    _ullis[0].style.transform = 'translateZ('+175+'px)';
    _ullis[1].style.transform = 'translateZ('+(-175)+'px)';
    _ullis[2].style.transform = 'translateX('+175+'px) rotateY('+90+'deg)';
    _ullis[3].style.transform = 'translateX('+(-175)+'px) rotateY('+(-90)+'deg)';
    _ullis[4].style.transform = 'translateY('+(-175)+'px) rotateX('+90+'deg)';
    _ullis[5].style.transform = 'translateY('+175+'px) rotateX('+(-90)+'deg)';
}
function b () {
    for (var i = 0;i<_ullis.length;i++) {
        _ullis[i].style.opacity = 0.8;
    }
    _ullis[0].style.transform = 'translateZ('+250+'px)';
    _ullis[1].style.transform = 'translateZ('+(-250)+'px)';
    _ullis[2].style.transform = 'translateX('+250+'px) rotateY('+90+'deg)';
    _ullis[3].style.transform = 'translateX('+(-250)+'px) rotateY('+(-90)+'deg)';
    _ullis[4].style.transform = 'translateY('+(-250)+'px) rotateX('+90+'deg)';
    _ullis[5].style.transform = 'translateY('+250+'px) rotateX('+(-90)+'deg)';
}
